<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .router-link-active {
            background-color: brown;
        }

        .router-link-exact-active {
            background-color: cornflowerblue;
        }
    </style>
</head>

<body>
    <div id="app">
        <router-link to='/home' tag="button">首页</router-link>
        <router-link to='/news/2' tag="button">新闻页</router-link>
        <router-link to='/about' tag="button">关于我们</router-link>
        <router-view></router-view>
        <!-- 顶层出口 -->
        <button>我是当前页</button>

    </div>



    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.13/dist/vue.js"></script>
    <script src='../vue-router.js'></script>
    <script>
        const NotFound = {
            template: `
            <div>
                <h2>404</h2>  
            </div>
            `
        }
        const Home = {
            template: `
            <div>
                <h2>我是首页</h2> 
            </div>
            `
        }
        const News = {
            template: `
            <div>
         
                <h2>我是news</h2>  
                {{$route.params.id}}
            </div>
            `,
            mounted() {
                console.log(this.$route)
            },
            watch: {
                $route(to, from) {
                    console.log(to, 111)
                    console.log(from, 222)
                }
            }


        }
        const About = {
            template: `
            <div>
                <h2>关于我们</h2>  
              
                <router-link to='/about/name' tag="button">name页</router-link>
                <router-link to='/about/passward' tag="button">passward页</router-link>
                <router-view></router-view>
                
            </div>
            `
        }
        const Name = {
            template: `
            <div>
                <h2>我是About的子name页</h2>  
            </div>
            `
        }
        const Passward = {
            template: `
            <div>
                <h2>我是About的子Passward页</h2>  
            </div>
            `
        }
        const routes = [
            {
                path: '/',
                redirect: '/home'
            },
            {
                path: '/home',
                component: Home
            },
            {
                path: '/news/:id',
                component: News
            },
            {
                path: '/about',
                component: About,
                children: [
                    {
                        path: '/about',
                        redirect: '/about/name'
                    },
                    {
                        path: '/about/name',
                        component: Name
                    },
                    {
                        path: '/about/passward',
                        component: Passward
                    },

                ]
            },
            {
                path: '*',
                component: NotFound
            }
        ]

        const router = new VueRouter({
            routes
        })


        var vm = new Vue({
            el: '#app',
            router
        })


    </script>
</body>

</html>